<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #action="{ record }">
        <TableAction
            :actions="[
              {
                icon: 'clarity:info-standard-line',
                tooltip: '查看日志详情',
                onClick: handleView.bind(null, record),
                ifShow: () => hasPermission(['account_read']),
              },
            ]"
        />
      </template>
    </BasicTable>
    <LogsModal @register="registerModal" />
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive} from 'vue';

import {BasicTable, TableAction, useTable} from '/@/components/Table';
import {getLogList} from '/@/api/system/logs';

import {useModal} from '/@/components/Modal';
import LogsModal from './LogsModal.vue';

import {columns, searchFormSchema} from './logs.data';

import {usePermission} from '/@/hooks/web/usePermission';

export default defineComponent({
  name: 'AccountManagement',
  components: {BasicTable, LogsModal, TableAction},
  setup() {
    const {hasPermission} = usePermission();
    const [registerModal, {openModal}] = useModal();
    const searchInfo = reactive<Recordable>({});
    const [registerTable,] = useTable({
      title: '日志列表',
      api: getLogList,
      beforeFetch(params) {
        params.order = ['-id']
        return params
      },
      afterFetch(items) {
        items.forEach(item => {
          item.detail = JSON.stringify(item.detail)
          return item
        })
        return items
      },
      rowKey: 'id',
      columns,
      showIndexColumn: false,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        autoAdvancedLine: 1,
        fieldMapToTime: [
          ['createTime', ['createTimeStart', 'createTimeEnd'], 'YYYY-MM-DD HH:mm:ss'],
        ],
      },
      useSearchForm: true,
      showTableSetting: true,
      tableSetting: {fullScreen: true},
      bordered: true,
      canResize: false,
      handleSearchInfoFn(info) {
        console.log('handleSearchInfoFn', info);
        return info;
      },
      actionColumn: {
        width: 60,
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'},
      },
    });

    function handleView(record: Recordable) {
      console.log(record);
      openModal(true, {
        record,
        isUpdate: true,
      });
    }

    return {
      hasPermission,
      registerTable,
      registerModal,
      handleView,
      searchInfo,
    };
  },
});
</script>
